import { useRequest } from 'ahooks';
import { SelectPeople } from '@pxxtech/web';
import { sleep } from '@pxxtech/utils';
import { DemoBlock } from 'demos';

function toOptions(data: any[], i: number = 0): any[] | undefined {
  if (!data) return undefined;
  return data.map((item, inx) => ({
    // ...item,
    icon: null,
    label: item.title,
    isPeople: item.isPeople,
    value: item.id || `${i}-${inx}`,
    children: toOptions(item.children, inx),
    disabled: !item.isPeople && !item.children?.length,
  }));
}

const Basic = () => {
  const { loading, data } = useRequest(async () => {
    await sleep(1000);
    const res = {
      code: 200,
      msg: 'OK',
      data: [
        {
          companyName: null,
          title: '业务运营中心',
          icon: '',
          children: [{ id: '302118005765', title: '赖筱萌', isPeople: true }],
          parentId: '0',
          id: '136',
        },
        {
          companyName: null,
          title: '综合管理中心',
          icon: '',
          children: [{ id: '302118005761', title: '陈小龙', isPeople: true }],
          parentId: '0',
          id: '137',
        },
        {
          companyName: null,
          title: '公司管理高层',
          icon: '',
          children: [
            {
              companyName: null,
              title: '小高层',
              icon: '',
              children: [
                { id: '302118005760', title: '陈大龙', isPeople: true },
              ],
              parentId: '138',
              id: '340',
            },
          ],
          parentId: '0',
          id: '138',
        },
        {
          companyName: null,
          title: '研发中心',
          icon: 'W4$i',
          children: [
            { id: '302118005769', title: '张小胜', isPeople: true },
            {
              companyName: null,
              title: '研发部',
              icon: '3vyxp',
              children: [
                {
                  companyName: null,
                  title: '后端组',
                  icon: '',
                  parentId: '62',
                  id: '151',
                },
                {
                  companyName: null,
                  title: '前端组',
                  icon: '',
                  children: [
                    { id: '302118005766', title: '张小三', isPeople: true },
                    { id: '302118005711', title: '张小姨', isPeople: true },
                    { id: '302118005712', title: '张小贰', isPeople: true },
                    { id: '302118005713', title: '张小叁', isPeople: true },
                    { id: '302118005714', title: '张小汜', isPeople: true },
                    { id: '302118005715', title: '张小武', isPeople: true },
                    { id: '302118005716', title: '张小鹿', isPeople: true },
                    { id: '302118005717', title: '张小崎', isPeople: true },
                  ],
                  parentId: '62',
                  id: '102',
                },
                {
                  companyName: null,
                  title: '客户端',
                  icon: '',
                  parentId: '62',
                  id: '244',
                },
              ],
              parentId: '61',
              id: '62',
            },
            {
              companyName: null,
              title: '技术部',
              icon: '',
              children: [
                { id: '302121010056', title: '曾畅', isPeople: true },
                { id: '302120005974', title: '杨毅', isPeople: true },
              ],
              parentId: '61',
              id: '99',
            },
          ],
          parentId: '0',
          id: '61',
        },
      ],
      success: true,
    };
    return toOptions(res.data);
  });

  return <SelectPeople loading={loading} options={data} />;
};

export default () => {
  return (
    <>
      <DemoBlock title="基本">
        <Basic />
      </DemoBlock>
    </>
  );
};
